<template>
  <!-- 搜索 -->
  <div class="head-container">
    <div v-show="sup_this.searchToggle">
      <template v-for="reportParam in sup_this.reportData.reportParamList">
        <el-input v-if="reportParam.paramQueryFlag === 'Y' && reportParam.paramType === 'string'" :style="'width:' + reportParam.paramWidth + 'px'" :key="reportParam.id" v-model="reportParam.paramValue" :placeholder="reportParam.paramDisplayName" clearable size="mini" class="filter-item" @keyup.enter.native="sup_this.toQuery"/>
        <el-input-number
          v-else-if="reportParam.paramQueryFlag === 'Y' && reportParam.paramType === 'number'"
          :style="'width:' + reportParam.paramWidth + 'px'"
          :key="reportParam.id"
          v-model.number="reportParam.paramValue"
          :placeholder="reportParam.paramDisplayName"
          :controls="false"
          size="mini"
          clearable
          @keyup.enter.native="sup_this.toQuery"/>
        <el-date-picker v-else-if="reportParam.paramQueryFlag === 'Y' && reportParam.paramType === 'date'" :style="'width:' + reportParam.paramWidth + 'px'" :key="reportParam.id" v-model="reportParam.paramValue" :placeholder="reportParam.paramDisplayName" type="date" size="mini" clearable class="filter-item" @keyup.enter.native="sup_this.toQuery"/>
        <el-date-picker v-else-if="reportParam.paramQueryFlag === 'Y' && reportParam.paramType === 'datetime'" :style="'width:' + reportParam.paramWidth + 'px'" :key="reportParam.id" v-model="reportParam.paramValue" :placeholder="reportParam.paramDisplayName" type="datetime" size="mini" clearable class="filter-item" @keyup.enter.native="sup_this.toQuery"/>
        <el-select v-else-if="reportParam.paramQueryFlag === 'Y' && reportParam.paramType === 'select'" :style="'width:' + reportParam.paramWidth + 'px'" :key="reportParam.id" v-model="reportParam.paramValue" :placeholder="reportParam.paramDisplayName" size="mini" clearable class="filter-item">
          <el-option v-for="item in reportParam.selectList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
        <el-select v-else-if="reportParam.paramQueryFlag === 'Y' && reportParam.paramType === 'multiselect'" :style="'width:' + reportParam.paramWidth + 'px'" :key="reportParam.id" v-model="reportParam.paramValue" :placeholder="reportParam.paramDisplayName" size="mini" multiple clearable class="filter-item">
          <el-option v-for="item in reportParam.selectList" :key="item.value" :label="item.label" :value="item.value"/>
        </el-select>
      </template>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="sup_this.toQuery">搜索</el-button>
      <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="reportResetQuery()">重置</el-button>
    </div>
    <div class="crud-opts">
      <DataGridOpts :sup_this="sup_this" @refreshClick="refreshClick" @searchClick="searchClick">
        <el-button
          v-loading="sup_this.exportLoading"
          slot="left"
          class="filter-item"
          size="mini"
          type="warning"
          icon="el-icon-download"
          title="导出"
          @click="doGridExport"
        />
      </DataGridOpts>
    </div>
  </div>
</template>

<script>
import { exportUrl } from '@/api/report/reportDefine'

export default {
  components: { },
  props: {
    sup_this: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    refreshClick() {
      this.sup_this.init()
    },
    searchClick() {
      this.sup_this.toggleSearch()
    },
    reportResetQuery() {
      this.sup_this.reportData.reportParamList.forEach(tmpvo => {
        tmpvo.paramValue = tmpvo.paramResetValue
      })
      this.sup_this.resetQuery()
    },
    doGridExport() {
      this.sup_this.doExport(exportUrl(), this.sup_this)
    }
  }
}
</script>
